<!DOCTYPE html>
<html lang="zh">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui" />
  <!-- <meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板"> -->
  <!-- <meta name="description" content="Light Year Admin V5是一个基于Bootstrap v5.1.3的后台管理系统的HTML模板。"> -->
  <title>学历形式管理</title>
  <!-- <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> -->
  <!-- <meta name="apple-mobile-web-app-capable" content="yes"> -->
  <!-- <meta name="apple-touch-fullscreen" content="yes"> -->
  <!-- <meta name="apple-mobile-web-app-status-bar-style" content="default"> -->
  <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" href="../css/style.min.css" />
  <link rel="stylesheet" type="text/css" href="../css/bootstrap-datepicker3.min.css" />
  <link rel="stylesheet" type="text/css" href="../css/page.css" />
</head>

<body>
  <div id="main" class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <!-- card start -->
        <div class="card">
          <!-- card-header start -->
          <header class="card-header d-flex justify-content-between align-items-center">
            <!-- breadcrumb navigator start -->
            <nav id="nav-title" aria-label="breadcrumb">
              <ol class="breadcrumb">
                <li>当前位置：</li>
                <li class="breadcrumb-item">基础管理</li>
                <li class="breadcrumb-item active" aria-current="page">
                  学历层次管理
                </li>
              </ol>
            </nav>
            <!-- breadcrumb navigator end -->
            <a class="btn btn-outline-primary" data-bs-toggle="collapse" href="#collapseExample" role="button"
              aria-expanded="false" aria-controls="collapseExample" @click="toggle">
              {{unfoldOrfold}}查询栏
            </a>
          </header>
          <div class="card-body py-0">
            <!-- query-area card start -->
            <div id="query-area" class="card mb-3">
              <!-- query-area collapse start -->
              <div class="collapse show py-1" id="collapseExample">
                <!-- query-area card-body start -->
                <div class="card-body pt-1">
                  <span class="d-block m-2">内容查询</span>
                  <div class="row">
                    <div class="col-11 col-md-9 col-lg-8 col-xl-6 mb-2">
                      <div class="input-group">
                        <label class="input-group-text" for="dateOfUpdate">
                          学历层次：
                        </label>
                        <input type="text" id="queryContent" class="form-control" placeholder="请输入..."
                          aria-label="选择字段的输入框" v-model="queryValue" />
                        <div class="d-flex align-items-center input-group-btn">
                          <label for="isFuzzy" class="mx-2">模糊查询</label>
                          <input type="checkbox" id="isFuzzy" class="form-check-input" v-model="fuzzy" />
                        </div>
                      </div>
                    </div>
                    <div class="col-2 col-lg-2 col-xl-1">
                      <button class="btn btn-primary col-12 col-md-9 col-lg-7 col-xl-12" type="button" @click="query">
                        查询
                      </button>
                    </div>
                  </div>
                </div>
                <!-- query-area card-body end -->
              </div>
              <!-- query-area collapse end -->
            </div>
            <!-- query-area card end -->
            <!-- function-area start -->
            <div id="function-area" class="d-flex justify-content-end mb-1">
              <button id="exportBtn" class="btn btn-primary mx-2" type="button" data-bs-toggle="modal"
                data-bs-target="#exampleModal" @click="exportInfo">
                新建
              </button>
            </div>
            <!-- function-area end -->
            <!-- table start -->
            <table class="table">
              <thead>
                <tr>
                  <th scope="col" class="col-5">学历层次</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,index) in logs" :key="item.logId">
                  <td :title="item.EducationalLevel">{{item.EducationalLevel}}</td>
                </tr>
              </tbody>

            </table>
            <!-- table end -->
          </div>
          <!-- card-body end -->
        </div>
        <!-- card end -->
      </div>

      <!-- 模态框 -->
      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">
                ----------------------新建内容-------------------</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <!-- 内容 -->
              <div class="row align-items-center">
                <div class="col-3">
                  <label class="input-group-text" for="dateOfUpdate">学历层次：</label>
                </div>
                <div class="col">
                  <input type="text" id="queryContent" class="form-control" placeholder="请输入..." aria-label="选择字段的输入框"
                    v-model="queryValue" />
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary">确认</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="../js/jquery.min.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script type="text/javascript" src="../js/bootstrap-datepicker.min.js"></script>
  <script type="text/javascript" src="../js/bootstrap-datepicker.zh-CN.min.js"></script>
  <script type="text/javascript" src="../js/main.min.js"></script>
  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript" src="../js/custom/Educational_level_page.js"></script>
</body>

</html>